<template>
    <div>
        <el-collapse v-model="collapseActives" class="edittypeform">
            <el-collapse-item title="组件样式" name="1">
                <el-row type="flex" class="editformitem">
                    <el-col :span="8" class="editlabel">
                        <span>背景</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-radio-group v-model="obj.style.bgcolorType" size="mini">
                            <el-radio-button label="single">单色</el-radio-button>
                            <el-radio-button label="image">图片</el-radio-button>
                            <el-radio-button label="gradient">渐变色</el-radio-button>
                        </el-radio-group>
                        <br>
                        <template v-if="obj.style.bgcolorType == 'gradient'">
                            <Gradient v-model="obj.style.gradient"></Gradient>
                        </template>
                        <template v-else-if="obj.style.bgcolorType == 'image'">
                            <img-store v-model="obj.style.backgroundImage" style="display:inline;">
                                <el-button size="mini" slot="button">设置背景图片</el-button>
                            </img-store>
                        </template>
                        <template v-else>
                            <el-color-picker class="inputsize" v-model="obj.style.backgroundColor" size="small" show-alpha
                                :predefine="predefineColors" popper-class="mycolorview"
                                @active-change="setColorChange(obj.style, 'backgroundColor', $event)" />
                        </template>
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>边框</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <input type="number" v-model.number="obj.style.borderWidth" class="miniinput" min="0" />
                        <!-- <el-input-number v-model="obj.style.borderWidth" class="miniinput" controls-position="right"
                      :min="0"></el-input-number> -->
                        <el-color-picker v-model="obj.style.borderColor" size="small" show-alpha
                            :predefine="predefineColors" popper-class="mycolorview"
                            @active-change="setColorChange(obj.style, 'borderColor', $event)" />
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>圆角</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <input type="number" v-model.number="obj.style.borderRadius" class="miniinput" min="0" />
                        <span>px</span>
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem">
                    <el-col :span="8" class="editlabel">
                        <span>投影</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-tooltip content="X轴" placement="top">
                            <input v-model="obj.style.boxShadow.h" type="number" class="miniinput" style="width:37px;" />
                        </el-tooltip>
                        <el-tooltip content="Y轴" placement="top">
                            <input v-model="obj.style.boxShadow.v" type="number" class="miniinput" style="width:37px;" />
                        </el-tooltip>
                        <el-tooltip content="阴影距离" placement="top">
                            <input v-model="obj.style.boxShadow.blur" type="number" class="miniinput" style="width:37px;" />
                        </el-tooltip>
                        <el-tooltip content="阴影大小" placement="top">
                            <input v-model="obj.style.boxShadow.spreed" type="number" class="miniinput"
                                style="width:37px;" />
                        </el-tooltip>
                        <el-color-picker v-model="obj.style.boxShadow.color" size="small" show-alpha
                            :predefine="predefineColors" popper-class="mycolorview"
                            @active-change="setColorChange(obj.style.boxShadow, 'color', $event)" />
                    </el-col>
                </el-row>

            </el-collapse-item>
            <el-collapse-item title="组件属性" name="2">
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>名称</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <input v-model="obj.asName" type="text" />
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">大小</el-col>
                    <el-col :span="16" class="editcontent dobuleinput">
                        <span>W</span>
                        <input type="number" v-model="obj.style.width" />
                        <span>H</span>
                        <input type="number" v-model="obj.style.height" />
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">位置</el-col>
                    <el-col :span="16" class="editcontent dobuleinput">
                        <span>X</span>
                        <input type="number" v-model="obj.style.top" />
                        <span>Y</span>
                        <input type="number" v-model="obj.style.left" />
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>层级</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <input type="number" v-model.number="obj.style.zIndex" class="miniinput" min="0" />
                        <!-- <el-input-number v-model="obj.style.zIndex" class="miniinput" controls-position="right"
                      :min="0"></el-input-number> -->
                    </el-col>
                </el-row>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: "BoxForm",
    props: {
        obj: Object,
        setColorChange: Function,
    },
    computed: {
        ...mapGetters(['predefineColors'])
    },
    components: {
        ImgStore: () => import("@/components/ImgStore"),
        Gradient: () => import('@/components/Gradient/index.vue')
    },
    model: {
        prop: "obj",
        event: "change",
    },
    data() {
        return {
            collapseActives: ['1', '2', '3']
        }
    },
}
</script>